<!DOCTYPE html>
<html>
<head lang="zh">
	<meta charset="UTF-8">
	<link rel="stylesheet" href="css/base.css">
	<title></title>
</head>
<body>
<noscript>此文档需要JavaScript支持才能正常使用</noscript>
<!-- 定义页面内容 -->
<div id="container">
	<button>listing-07</button>
	<button>listing-09</button>
	<button>listing-10</button>
</div>
<table id="events" border="1"></table>
<div id="target">
	Press a button.
</div>
<!-- 页面内容结束 -->
<!-- 定义页尾 -->
<footer>

</footer>
<!-- JavaScript脚本链接请在此处插入 -->
<script>
	var buttons = document.getElementsByTagName('button');

	for(var i = 0; i < buttons.length; i++){
		buttons[i].onclick = handleButtonPress;
	}

	function handleButtonPress(e){
		clearEventDetails();
		var httpRequest = new XMLHttpRequest();
		httpRequest.onreadystatechange = handleResponse;
		httpRequest.onerror = handleError;
		httpRequest.onload = handleLoad;
		httpRequest.onloadend = handleLoadEnd;
		httpRequest.onloadstart = handleLoadStart;
		httpRequest.onprogress = handleProgress;
		httpRequest.open('GET', e.target.innerHTML + '.html');
		httpRequest.send();
	}

	function handleResponse(e){
		if(e.target.readyState == XMLHttpRequest.DONE && e.target.status == 200){
			document.getElementById('target').innerHTML = e.target.responseText;
		}
	}

	function handleError(e){ displayEventDetails('error', e);}
	function handleLoad(e){ displayEventDetails('load', e);}
	function handleLoadEnd(e){ displayEventDetails('loadend', e);}
	function handleLoadStart(e){ displayEventDetails('loadstart', e);}
	function handleProgress(e){ displayEventDetails('progress',e);}

	function clearEventDetails(){
		document.getElementById('events').innerHTML = '<tr><th>Event</th><th>lengthComputable</th><th>loaded</th><th>total</th></tr>';
	}
	function displayEventDetails(eventName, e){
		if(e){
			document.getElementById('events').innerHTML += '<tr><td>' + eventName + '</td><td>' + e.lengthComputable + '</td><td>' + e.loaded + '</td><td>' + e.total + '</td></tr>';
		}
		else{
			document.getElementById('events').innerHTML += '<tr><td>' + eventName + '</td><td>NA</td><td>NA</td><td>NA</td></tr>';
		}
	}
</script>
</body>
</html>